<!--
Copyright 2014 The Chromium Authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file.
-->

<link rel="import" href="../bower_components/core-pages/core-pages.html">
<link rel="import" href="../bower_components/paper-tabs/paper-tab.html">
<link rel="import" href="../bower_components/paper-tabs/paper-tabs.html">
<link rel="import" href="ct-results-detail.html">

<polymer-element name="ct-results-by-builder" attributes="failure">
  <template>
    <style>
      :host {
        display: block;
      }
      paper-tabs::shadow #selectionBar {
        background-color: #212121;
        height: 4px;
      }
      paper-tab {
        border: 1px solid #212121;
        border-radius: 5px 5px 0 0;
      }
      paper-tab::shadow #ink {
        color: #212121;
      }
    </style>
    <paper-tabs selected="{{ selected }}">
      <template repeat="{{ builder in builders }}">
        <paper-tab>{{ builder }}</paper-tab>
      </template>
    </paper-tabs>
    <ct-results-detail flex layout vertical failure="{{ failure }}" builder="{{ builders[selected] }}"></ct-results-detail>
  </template>
  <script>
    Polymer({
      failure: null,
      builders: [],
      selected: 0,

      failureChanged: function() {
        this.builders = Object.getOwnPropertyNames(this.failure.resultNodesByBuilder).sort();
        this.selected = 0;
      },
    });
  </script>
</polymer-element>
